//定义Todo接口
interface Todo{
    id:number;
    title:string;
    completed:boolean;
}
//实现TodoList类
class TodoList{
    todos:Todo[]=[];
    addTodo(title:string):void{
        const newTodo:Todo={
            id :Date.now(),
            title,
            completed:false,
        };
        this.todos.push(newTodo);

    }
    removeTodo(id:number):void{
        this.todos = this.todos.filter(todo=>todo.id!==id);
    }
    toComplete(id:number):void{
        const todo = this.todos.find(todo=>todo.id===id);
        if(todo){
            todo.completed=!todo.completed;
        }
    }
}
//处理dom操作
const todoList = new TodoList();
const inputElement = document.getElementById('new-todo') as HTMLInputElement;
const addButton = document.getElementById('add-todo') as HTMLButtonElement;
const listElement = document.getElementById('todo-list') as HTMLUListElement;
addButton.addEventListener('click',()=>{
    if(inputElement.value.trim()){
        todoList.addTodo(inputElement.value);
        inputElement.value='';
        renderTodos();
    }
})
//渲染任务列表
function renderTodos():void{
    listElement.innerHTML='';
    todoList.todos.forEach(todo=>{
        const li = document.createElement('li');
        li.textContent = todo.title;
        const deleteButton = document.createElement('button');
        deleteButton.textContent = '删除'
        deleteButton.addEventListener('click',()=>{
            todoList.removeTodo(todo.id);
            renderTodos();
        });
        li.appendChild(deleteButton);
        listElement.appendChild(li);
    });
}